<template>
	<el-form 
		v-if="loginShow"
		ref="loginForm"
		:rules="loginRules"
		:model="loginForm"
		class="login-form"
	>
		<el-form-item label="用户名" prop="username">
			<el-input
				v-model="loginForm.username"
				auto-complete="off"
				placeholder="请输入用户名"
			></el-input>
		</el-form-item>

		<el-form-item label="密码" prop="password">
			<el-input
				v-model="loginForm.password"
				:type="passwordType"
				auto-complete="off"
				placeholder="请输入密码"
			></el-input>
		</el-form-item>

		<el-form-item>
			<a class="forget-pass">忘记密码</a>
		</el-form-item>

		<el-form-item>
			<el-button class="login-btn" type="primary" @click="handleLogin">登&nbsp;录</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	export default{
		data(){
			return{
				loginShow:false,
				loginForm:{
					username:"admin",
					password:"123456",
				},
				loginRules:{
					username:[{ required: true, message: "请输入用户名", trigger: "blur" }],
					password: [
          				{ required: true, message: "请输入密码", trigger: "blur" },
          				{ min: 6, message: "密码长度最少为6位", trigger: "blur" }
        			]
				},
				passwordType: "password",
				redirect: undefined,
				loading: false,
			}
		},
		watch: {
    		$route: {
      			handler: function(route) {
        			this.redirect = route.query && route.query.redirect
      			},
      			immediate: true
    		}
  		},
  		mounted(){
  			setTimeout(()=>{
  				this.loginShow = true;
  			},30)
  		},
  		methods:{
  			handleLogin(){
  				this.$refs.loginForm.validate(valid => {
  					if (valid) {
  						this.loading = true
  						this.$store.dispatch('user/loginByUsername', this.loginForm).then(() => {

            				console.log("-------登录成功后返回-------")
            				this.$router.push({ path: this.redirect || '/' })
            				this.loading = false
          				}).catch(() => {
            				this.loading = false
          				})
  					}else{
  						return false
  					}
  				})
  			}
  		}
	}
</script>

<style>
	.login-form .el-input input{
		background-color: #f5f8fa;
    	color: #33475b;
	}

	.login-form .el-form-item{
		margin-bottom: 10px;
	}

	.login-form .el-form-item .el-form-item__label{
		color: #666;
		font-weight: 700;
	}

	.login-form .el-form-item .el-input input:focus {
	    border-color: rgba(255,129,0,.5);
	    box-shadow: 0 0 4px 1px rgba(255,129,0,.3), 0 0 0 1px #ff8100;
	    outline: 0;
	}

	.login-form .el-form-item.is-error .el-input input:focus {
	    border-color: rgba(245,108,108,.5);
	    box-shadow: 0 0 4px 1px rgba(245,108,108,.3), 0 0 0 1px #F56C6C;
	    outline: 0;
	}
</style>

<style scoped>
	.login-btn{
		width: 100%;
	}

	.forget-pass{
		font-size: 12px;
		color: #ffffff;
	}
</style>